<template>
	<view class="container">
		<view class="header">
			<button type="default" plain class="service-btn" @click="phoneFunc(order)">
				<image src="/static/images/order/order_icon_service.png" />
				<text>联系客服</text>
			</button>
		</view>
    <uni-popup ref="popup" type="centor" @change="change"  :maskClick="false">
      <view class="content" v-if="Object.keys(order).length>0">
      <view class="order-box" style="border-radius: 30px;
    position: absolute;
    width: 70%;
    top: 20vh;
    left: 4rem;height: 230px;">
        <image src="/static/images/order/icon_making.png" class="status-icon"/>
        <view class="text-color-primary font-size-lg font-weight-bold mb-10">订单{{ statusObj[order.status] }}</view>
        <view class="text-color-primary font-size-lg font-weight-bold mb-10"v-if="order.status == 20
								|| orders.status==50
								|| orders.status == 40
								|| orders.status==30">取茶码:{{ order.specOrder }}</view>
        <view class="text-color-assist font-size-sm">感谢您对{{brandName}}的支持，欢迎再次光临</view>
        <button style="outline: none;
    background: green;
    color: white;
    width: 75%;
    margin: 12px;
    border-radius: 14px;" @click="dd">退下吧</button>
      </view>
    </view>
    </uni-popup>
    <view class="content" v-if="Object.keys(order).length>0">
      <view class="order-box">
        <image src="/static/images/order/icon_making.png" class="status-icon"/>
        <view class="text-color-primary font-size-lg font-weight-bold mb-10">{{ order.specOrder }}订单{{ statusObj[order.status] }}</view>
        <view class="text-color-primary font-size-lg font-weight-bold mb-10"v-if="order.status == 20
								|| orders.status==50
								|| orders.status == 40
								|| orders.status==30">取茶码:{{ order.specOrder }}</view>
        <view class="text-color-assist font-size-sm">感谢您对{{brandName}}的支持，欢迎再次光临</view>
      </view>
      <view class="flex-fill overflow-auto">
        <view class="order-info">
          <list-cell padding="50rpx 40rpx" line-right bgcolor="#f6f6f6">
            <view class="w-100 d-flex align-items-center">
              <view class="flex-fill d-flex flex-column overflow-hidden">
                <view class="font-size-lg mb-10">{{order.zzjgName}}</view>
                <view class="font-size-extra-sm text-color-assist text-truncate">{{ order.zzjgAddress }}</view>
              </view>
              <view class="d-flex align-items-center ml-20">
                <image src="/static/images/order/icon_phone.png" class="phone-icon" @tap="function(){phoneFunc(order)}"></image>
                <image src="/static/images/order/icon_map.png" class="map-icon" @tap="function(){goShopAddr(order)}"></image>
              </view>
            </view>
          </list-cell>
          <list-cell padding="0 40rpx" line-right bgcolor="#f6f6f6">
            <view class="w-100 d-flex flex-column">
              <view class="d-flex align-items-center mt-40" v-for="(item, index) in order.skuList" :key="index">
                <view class="images">
                  <image :src="item.img" style="height: 35px;width: 35px"></image>
                </view>
                <view class="flex-fill d-flex flex-column" style="margin-top: -0.3rem;margin-left: 0.5rem;">
                  <view class="font-size-base mb-10">{{ item.title }}</view>
                  <view class="font-size-extra-sm text-color-assist">
                    {{ item.specification }}
                  </view>
                </view>
                <view class="flex-shrink-0 font-weight-bold ml-40">x{{ item.num }}</view>
                <view class="flex-shrink-0 font-weight-bold ml-40">￥{{ (item.price/ 100).toFixed(2) }}</view>
              </view>
              <!-- <view class="d-flex justify-content-between align-items-center mt-40 pb-30 border-dashed">
                <view>商品总价</view>
                <view>￥{{ (order.actualPrice/ 100).toFixed(2) }}</view>
              </view> -->
              <view class="d-flex justify-content-between align-items-center font-size-lg font-weight-bold mt-30 mb-40">
                <view>合计</view>
                <view>￥{{ (order.actualPrice/ 100).toFixed(2) }}</view>
              </view>
            </view>
          </list-cell>
          <list-cell padding="30rpx 40rpx" last bgcolor="#f6f6f6" style="border-radius: 0 0 30rpx 30rpx;">
            <view class="w-100 d-flex flex-column font-size-extra-sm text-color-assist">
              <view class="mb-10">如需退款，请致电门店</view>
              <view class="mb-10">下单时间：{{ order.gmtCreate }}</view>
              <!-- <view class="mb-10">取茶号：{{ order.pickup_no }}</view> -->
              <view class="mb-10">订单编号：{{ order.orderNo }}</view>
              <!-- <view class="mb-10">备注信息：{{ order.remarks }}</view> -->
            </view>
          </list-cell>
        </view>
        <!-- 微信小程序 -->


        <!--        <view class="ad-view">-->
        <!--          <ad unit-id="adunit-51a32d77b78f728a" ad-intervals="50"></ad>-->
        <!--        </view>-->
        <!--				<view class="order-invoice font-size-base d-flex justify-content-between align-items-center">-->
        <!--					<view>订单发票</view>-->
        <!--					<view class="text-color-primary d-flex align-items-center">-->
        <!--						<view>立即开票</view>-->
        <!--						<image src="/static/images/common/common_icon_jump_gold.png" class="jump-icon"></image>-->
        <!--					</view>-->
        <!--				</view>-->
      </view>
    </view>


	</view>
</template>

<script>
	import listCell from '@/components/list-cell/list-cell.vue'
  import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import { phone } from "@/config/index.js";
  import WatchButton from "../../components/watch-login/watch-button.vue";
	export default {
		components: {
      WatchButton,
			listCell
		},
		data() {
			return {
        brandName:this.$api.brandName,
				statusObj: {
					10: "待支付",
					20: "待制作",
					30:　"待收货",
					40: "待评价",
					50: "已完成",
					60: "退款中",
					70: "已退款",
					80: "已取消",
					90: "已取消（系统）"
				},
				order: {
					
				},
        rAd: null
			}
		},
		computed: {
			materialsText() {
				return materials => {
					let arr = []
					materials.forEach(item => arr.push(item.name))
					return arr.join(',')
				}
			}
		},
		async onLoad(options) {
			const { id,orderNo } = options;
			console.log("是这个ID?",id)
			console.log("是这个orderNo?",orderNo)
			const userId = uni.getStorageSync("userId");
			if (userId) {
        if(orderNo===undefined){
          console.log("THIS")
          this.getDetail(id, userId);
        }else{
          console.log("THAT")
          this.getDetailByOrderNo(orderNo,userId)
        }
			}
		},
    onReady() {

      this.rAd = wx.createRewardedVideoAd({adUnitId:"adunit-3c642ec8f76a3ee5"});
      this.rAd.load();
      this.rAd.onError(err=>{

      })
    },
		methods: {
      dd(){
        this.$refs['popup'].close();
        this.rAd.show();
      },
			goShopAddr(orderInfo){
				let {zlat,zlng,zzjgAddress,zzjgName,priZZJGID} = orderInfo
				uni.navigateTo({
					url: '/pages/map/index?shopName='+zzjgName+'&zlat='+encodeURIComponent(zlat)+"&zlng="+encodeURIComponent(zlng)
							+"&zzjgAddress="+zzjgAddress+"&priZZJGID="+priZZJGID
				})

			},
			phoneFunc(order) {
				let {zzjg:{phone}}  = order
				if(phone==null){
					phone = "037188888808"
				}
				console.log(order)
				uni.makePhoneCall({
				    phoneNumber: phone //仅为示例
				});
			},
			getDetail(orderId, userId) {
				this.$api.ajax({
					url: "/web/app-order/get-order-detail",
					// method: "post",
					data: {
						orderId,
						userId
					},
					success: (res) => {
						const { data } = res.data || {};
						this.order = data || {};
					}
				});
			},
      getDetailByOrderNo(orderNo, userId) {
        let orderId = "";
        this.$api.ajax({
          url: "/web/app-order/get-order-detail",
          // method: "post",
          data: {
            orderId,
            userId,
            orderNo
          },
          success: (res) => {
            const { data } = res.data || {};
            this.order = data || {};
            this.$refs['popup'].open()

          }
        });
      }
		}
	}
</script>

<style lang="scss" scoped>
.container {
	background-color: #EAEAEA;
	padding: 0 40rpx;
	display: flex;
	flex-direction: column;
}

.header {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	padding: 20rpx 0;

	.service-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50rem !important;
		font-size: $font-size-sm;
		image {
			width: 30rpx;
			height: 30rpx;
			margin-right: 20rpx;
		}
	}	
}

.content {
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	
	.order-box {
		z-index: 10;
		height: 25vh;
		border-radius: 30rpx 30rpx 0 0;
		box-shadow: 0 0 20rpx 0 rgba($color: #333, $alpha: 0.1);
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: $bg-color-white;
		flex-shrink: 0;
		
		.status-icon {
			width: 100rpx;
			height: 100rpx;
			margin-bottom: 30rpx;
		}
	}
}

.phone-icon, .map-icon {
	width: 64rpx;
	height: 64rpx;
}

.phone-icon {
	margin-right: 40rpx;
}

.border-dashed {
	border-bottom: 1rpx dashed $border-color;
}

.order-info {
	border-radius: 0 0 30rpx 30rpx;
	box-shadow: 0 0 10rpx 0 rgba($color: #333, $alpha: 0.1);
	margin-bottom: 30rpx;
}

.order-invoice {
	padding: 30rpx 40rpx;
	border-radius: 30rpx;
	box-shadow: 0 0 10rpx 0 rgba($color: #333, $alpha: 0.1);
	margin-bottom: 60rpx;
	background-color: #F6F6F6;
}

.jump-icon {
	width: 24rpx;
	height: 48rpx;
	margin-left: 20rpx;
}
</style>
